@mixin switch($color) {
  input{
    &:checked {
      & ~ i{
        background-color:$color;
        border-color: $color;
        & ~ span{
          color: $color;
        }
      }
      &:disabled{
            & ~ i{
                bgc:mix($color,$white);
                bdc:mix($color,$white);
            }
            & ~ span{
                co:mix($color,$white);
            }
        }
    }
  }
}
.x-switch{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    padding:0 6px;
    span{
      color: #999;
      font-size: 26px;
    }
    input{
      position: absolute;
      opacity: 0;
      & ~ i {
        display: inline-block;
        position: relative;
        width: .72rem;
        height: .32rem;
        border-radius: 100px;
        background-color: #ccc;
        border-color: #ccc;
        vertical-align: -.06rem;
        &::after{
          content: '';
          position: absolute;
          left: 1px;
          top: 1px;
          width: .28rem;
          height: .28rem;
          background-color: #fff;
          border-radius: 50%;
          transition: all .5s ease-out;
        }
      }
      &:checked {
        & ~ i{
          position: relative;
          background-color: $primary;
          border-color: $primary;
          &::after{
            content: '';
            left: calc(100% - 15px);
          }
          & ~ span{
            color: $primary;
          }
        }
        &:disabled{
            & ~ i{
                bgc:mix($primary,$white);
                bdc:mix($primary,$white);
            }
            & ~ span{
                co:mix($primary,$white);
            }
        }
      }
      &:disabled{
          & ~ i{
              bgc:mix(#ccc,$white);
              bdc:mix(#ccc,$white);
          }
          & ~ span{
              co:mix(#ccc,$white);
          }
      }
    }
    &.primary{
        @include switch($primary)
      }
      &.success{
        @include switch($success)
      }
      &.warning{
        @include switch($warning)
      }
      &.danger{
        @include switch($danger)
      }
  }